<template>
  <div class="materialDetail" :style="{ '--color': `${theme_color}` }">
    <c-title :hide="false" :text="'素材中心'"></c-title>
    <div class="content">
      <div class="user_info">
        <div class="user_name">
          <div class="user">
            <img :src="info.logo" />
          </div>
          <ul class="right">
            <li class="name">{{ info.name || info.title }}</li>
            <li class="time">{{ info.created_at }}</li>
          </ul>
          <div class="copy" v-clipboard:copy="info.content" v-clipboard:success="onCopy" v-clipboard:error="onError">
            <i class="iconfont icon-fuzhi"></i>
            复制
          </div>
        </div>
        <p class="share_text" v-html="info.content"></p>
        <viewer :images="info.images" class="goods_box">
          <div class="img" v-for="(img, i) in info.images" :key="i">
            <img :src="img"/>
          </div>
          <div class="video" v-if="info.videos && info.videos.video_url">
            <video
              :id="'video' + i"
              :src="info.videos.video_url"
              :poster="info.videos.video_image"
              style="width: 100%; height: 100%;"
              @play="onPlayerPlay(i)"
              x5-video-player-type="h5"
              controls
              x5-video-player-fullscreen="true"
            ></video>
          </div>
        </viewer>

        <div class="goods_lik" v-if="info.goods && info.goods_id !== 0" @click="toGoods(info.goods.id)">
          <div class="goods_img">
            <img :src="info.goods.thumb" />
          </div>
          <ul class="goods_name">
            <li class="name" style="-webkit-box-orient: vertical;">
              {{ info.goods.title | escapeTitle }}
            </li>
            <li class="number">{{ $i18n.t("money") }}{{ info.goods.price }}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="goods_share set-pc-style">
      <!-- <div class="right" v-clipboard:copy="info.content" v-clipboard:success="onCopy" v-clipboard:error="onError">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FmaterialCenter%2F%E7%BB%84%20565%402x.png" alt="" />
        <span>图文</span>
      </div> -->
      <div class="right" @click.stop="downImage" v-if="this.fun.isCPS()">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FmaterialCenter%2F%E7%BB%84%20565%402x.png" alt="" />
        <span>下载图片</span>
      </div>
      <div class="right" @click.stop="postShow(info.goods.id)">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FmaterialCenter%2F%E7%BB%84%20564%402x.png" alt="" />
        <span>商品码</span>
      </div>
      <div class="right" @click.stop="shareTap">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FmaterialCenter%2F%E7%BB%84%20563%402x.png" alt="" />
        <span>分享</span>
      </div>
    </div>
    <!-- 商品码 -->
    <van-popup v-model="posterShow" position="center" round :style="{ width: '320px', background: 'transparent', overflow: 'inherit' }" @click.stop>
      <div class="goods_code_popup">
        <img :src="'data:' + posterImg.mime + ';base64,' + posterImg.base64Image" v-if="posterImg.base64Image" style="width: 100%; border-radius: 0.375rem;" />
        <img src="../../assets/images/img_default.png" v-if="!posterImg.base64Image" style="width: 100%; height: 100%; border-radius: 0.375rem;" />
        <div class="close" @click="posterShow = false">
          <img src="../../assets/images/material_close.png" />
        </div>
      </div>
    </van-popup>

    <!-- 分享弹窗 -->
    <van-popup v-model="showShare" round closeable get-container="#app">
      <div class="share-title">分享</div>
      <div class="share-list" @click="showShare = false">
        <div class="share-list-chile" @click="shareWeixin()">
          <div class="share-list-icon"><i class="iconfont icon-fx_haoyou"></i></div>
          分享好友
        </div>
        <div class="share-list-chile" v-if="plugin_setting && plugin_setting.douyin_share && plugin_setting.douyin_share.status" @click.stop="getDouyinOptions()">
          <div class="share-list-icon" style="background: #fff;"><i class="iconfont icon-all_trill" style="color: #000; font-size: 40px;"></i></div>
          分享抖音
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: [],
      theme_color: "",
      posterShow: false,
      posterImg: {},
      showShare: false
    };
  },
  activated() {
    this.theme_color = JSON.parse(localStorage.getItem("yz_basic_info")).theme_color;
    this.initData();
    this.getData();
    this.plugin_setting = localStorage.getItem("plugin_setting") ? JSON.parse(localStorage.getItem("plugin_setting")) : {};
  },
  methods: {
    initData() {
      this.posterShow = false;
      this.posterImg = {};
    },
    toGoods(good_id) {
      this.$router.push(
        this.fun.getUrl("goods", {
          id: good_id
        })
      );
    },
    shareTap() {
      this.showShare = true;
    },
    onCopy(e) {
      this.$toast({
        message: "复制成功",
        position: "bottom",
        duration: 500
      });
    },
    onError(e) {
      this.$toast({
        message: "复制失败",
        position: "bottom",
        duration: 1000
      });
    },
    //海报生成
    postShow(id) {
      if (!id) return this.$toast("该素材未设置关联商品!");

      this.posterImg = {};
      $http
        .get(
          "goods.goods-poster.generate-goods-poster",
          {
            id: id
          },
          "生成中"
        )
        .then(response => {
          if (response.result === 1) {
            this.posterShow = true;
            this.posterImg = response.data;
          } else {
            this.posterShow = false;
            this.$dialog.alert({
              message: response.msg
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getData() {
      $http
        .get("plugin.material-center.api.centerlist.detail", { id: this.$route.params.id }, " ")
        .then(
          response => {
            if (response.result === 1) {
              this.info = response.data;
              let json = {
                title: "",
                description: "",
                imgUrl: ""
              };
              json.title = this.info.title ? this.info.title : this.info.name;
              json.description = this.info.content ? this.info.content : this.info.name;
              json.imgUrl = this.info.images.length <= 0 ? this.info.set.icon : this.info.images[0];
              this.fun.wxShare("", {}, json);
            } else {
              this.$toast(response.msg);
            }
          },
          response => {
            this.$dialog.alert({
              message: response.msg
            });
          }
        )
        .catch(err => {
          console.error(err);
        });
    },
    shareWeixin() {
      this.$dialog.alert({ message: "请点击右上角分享" });
    },
    getDouyinOptions() {
      $http
        .get("plugin.douyin-share.frontend.controllers.index.index", {}, "加载")
        .then(response => {
          if (response.result === 1) {
            let {client_key,nonce_str,signature,timestamp} = response.data;
            let dyJson = {
              share_type: "h5",
              client_key: client_key,
              nonce_str: nonce_str,
              timestamp: timestamp&&timestamp.toString(),//需要字符串
              signature: signature,
              title: this.info.title||''
            };

            let {media_share,video_share} = this.plugin_setting.douyin_share;

            // 分享商品其他图片集，复制商品标题；如果选择分享优先级为视频(good_share为2)，则素材包含视频的，分享首图视频！
            if (media_share == '2' && this.info.videos && this.info.videos.video_url) {
              dyJson.share_to_publish = Number(video_share) - 1;
              dyJson.video_path = this.info.videos && this.info.videos.video_url;
            } else {
              if(this.info.images.length > 0){
                dyJson.image_list_path = JSON.stringify(this.info.images);
              } else {
                return this.$toast('提示当前内容无图片/视频，不能分享到抖音');
              }
            }
            const schema = window.dy_open_util.serialize(dyJson);
            if(this.fun.isWeiXin()) {
              return this.$router.push(this.fun.getUrl("urlGuide", {},{path: schema, text: '点击右上角“...”，选择在浏览器中打开，唤起抖音APP进行分享！'}));
            }
            window.location.href = schema;
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 保存图片
    downImage() {
      this.info.images.forEach((item) => {
        if (this.fun.isIosOrAndroid() === "ios") {
          sharePoster({ body: "sharePoster", url: item });
        } else {
          downImageAndroid(item);
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.content {
  padding-bottom: 3rem;
  // padding-top: 0.5rem;
  .user_info {
    // margin: 0 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0 0.63rem;
    padding-bottom: 2.13rem;
    box-sizing: border-box;
    // padding: 0 0.9375rem;
    background: #fff;
    // border-top: solid 0.0625rem #ebebeb;
    // border-bottom: solid 0.0625rem #ebebeb;
    margin-bottom: 0.625rem;
    border-radius: 0.5rem;

    .user_name {
      display: flex;
      padding-top: 0.9375rem;

      .user {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 100%;
        border: solid 0.0625rem #ebebeb;
        overflow: hidden;
        background: #f2f2f2;
        margin-right: 0.5rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        flex: 1;
        text-align: left;
        font-size: 0.94rem;

        .name {
          // margin-bottom: 0.5rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-weight: bold;
          line-height: 1.31rem;
        }

        .time {
          font-size: 0.75rem;
          color: #999;
          line-height: 1.03rem;
        }
      }

      .copy {
        display: flex;
        align-items: center;
        margin-right: 0.5rem;
        font-size: 0.88rem;
        color: var(--color);

        .iconfont {
          margin-right: 0.13rem;
        }
      }
    }

    .share_text {
      font-size: 0.94rem;
      line-height: 1.5rem;
      text-align: left;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .goods_box {
      display: flex;
      flex-wrap: wrap;
      // max-height: 21.875rem;
      overflow: hidden;

      .video {
        // width: 6.9375rem;
        // height: 6.9375rem;
        overflow: hidden;
        margin-bottom: 0.375rem;
        position: relative;
      }

      .img {
        // width: 6.64rem;
        // height: 7.34rem;
        overflow: hidden;
        border-radius: 0.25rem;
        // background: #f2f2f2;
        margin-right: 0.28rem;
        margin-bottom: 0.375rem;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .img:nth-child(3n) {
        margin: 0;
      }
    }

    .goods_lik {
      background: #f7f7f7;
      margin-top: 0.25rem;
      display: flex;
      padding: 0.5rem;
      box-sizing: border-box;
      border-radius: 0.625rem;

      .goods_img {
        flex-shrink: 0;
        width: 5rem;
        height: 4.06rem;
        overflow: hidden;
        border-radius: 0.13rem;
        margin-right: 0.5rem;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .goods_name {
        flex: 1;
        text-align: left;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .name {
          font-size: 0.81rem;
          color: #333;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .number {
          font-size: 0.94rem;
          color: #f84949;
          margin-top: 0.5rem;
        }
      }
    }
  }
}

.goods_share {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding-top: 0.625rem;
  // border-top: solid 0.0625rem #ebebeb;
  display: flex;
  align-items: center;
  padding: 0.625rem 0;

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    // border-right: solid 0.0625rem #ebebeb;
    font-size: 0.81rem;
    color: #999;
    justify-content: center;
    align-items: center;

    .iconfont {
      margin-right: 0.375rem;
      color: #999;
      font-size: 1.125rem;
    }
  }

  .right img {
    width: 1rem;
    height: 1rem;
    margin: 0;
    margin-right: 0.13rem;
  }

  .right {
    border: none;
  }
}

.goods_code_popup {
  background: #fff;
  border-radius: 0.5rem;
  position: relative;
  width: 90%;
  display: inline-block;
  margin: 0 auto;

  .goods_img {
    width: 20rem;
    height: 20rem;
    background: #f2f2f2;
    overflow: hidden;
    padding: 0.25rem;
    border-radius: 0.375rem 0.375rem 0 0;

    img {
      width: 85%;
    }
  }

  .goods_info {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem;

    .info_left {
      width: 12.5rem;

      .name {
        font-size: 14px;
        line-height: 1.25rem;
        height: 2.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .price {
        font-size: 24px;
        color: #f15353;
        text-align: left;
        margin-top: 0.75rem;
        font-weight: bold;

        span {
          font-size: 14px;
          color: #8c8c8c;
          text-decoration: line-through;
          margin-left: 0.9375rem;
          font-weight: normal;
        }

        font {
          font-size: 14px;
        }
      }
    }

    .info_right {
      .code_img {
        width: 5.5rem;
        height: 5.5rem;
        background: #f2f2f2;
        overflow: hidden;

        img {
          width: 100%;
        }
      }

      span {
        font-size: 12px;
        line-height: 1.25rem;
      }
    }
  }

  .close {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;

    img {
      width: 80%;
    }
  }
}

.share-title {
  height: 3rem;
  line-height: 3.5rem;
}

.share-list {
  width: 16rem;
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem 1rem;
  justify-content: space-between;

  .share-list-chile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem 1.5rem;
    font-size: 12px;

    .share-list-icon {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: #fac337;
      line-height: 2.5rem;
      overflow: hidden;
      margin-bottom: 0.5rem;

      i {
        color: #fff;
        font-size: 20px;
      }
    }
  }
}
</style>
